<template>
    <div class="addcomm">
      <div class="addcom_hander">
        <h1 class="addcom_title">商品管理 -- 添加商品</h1>
      </div>
      <div class="addcom_content">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称">
            <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input placeholder="请输入商品描述" v-model="form.subtitle"></el-input>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-select v-model="form.region" @change="regionChange" placeholder="请选择一级品类">
              <el-option
                v-for="(item,index) in region1list"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-select v-if="form.region" v-model="form.region2" placeholder="请选择二级品类">
              <el-option
                v-for="(item,index) in region2list"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input class="inp" placeholder="价格" v-model="form.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input class="inp" placeholder="库存" v-model="form.stock">
              <template slot="append">件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品图片">
             <!--action 图片上传地址  图片服务器地址 -->
             <el-upload
                name="upload_file"
                class="upload-demo"
                action="/api/product/upload.do"       
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :before-upload="beforeAvatarUpload"
                :on-success="handleSuccess"
                >
                
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

          </el-form-item>
          <el-form-item label="商品详情">
            <quill-editor
                :content="content"
                :options="editorOption"
                @change="onEditorChange($event)"
            />

            
          </el-form-item>
          <!-- <div v-html="this.form.detail"></div> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { addProduct,  categoryList } from "../../api/index";
  
  export default {
    data() {
      return {
        form: {
          categoryId: 0,
          name: "",
          subtitle: "",
          stock: "",
          region2: "",
          region: "",
          subImages: "",
          detail: "",
          price: "",
          status: 1
        },
        region1list: [],
        region2list: [],
        content: '<h2>I am is a  富文本编辑器</h2>',
        editorOption: {},
        fileList: [],
        imageUrl: ""
      };
    },
    mounted() {
      //一级品类
      categoryList().then(res=>{
        console.log(res)
        this.region1list = res.data.data;
      })

    },
    methods: {
      // 上传成功   图片地址
      handleSuccess(response, file, fileList) {

        console.log(response, file, fileList)
        // 相对路径
        this.form.subImages  =  response.data.uri;
      },
      handlePreview(file) {
        // return   this.$confirm(`确定上传${file.name}文件`)
      },
      handleRemove(file, fileList){
        console.log(file, fileList)
        // return   this.$confirm(`已经删除${file.name}`)
      },
      beforeRemove(file, fileList) {
        console.log(file, fileList)
        // return   this.$confirm(`确定删除${file.name}`)
      },
  
      // 图片上传之前限制上传图片类型及大小   只能上传jpg/png文件，且不超过2Mb
      beforeAvatarUpload(file) {
        console.log(file.name)
        let msg = file.name.substring(file.name.lastIndexOf('.')+1);
        console.log(msg)
        const  extension = msg === 'png';
        const  extension2 = msg === 'jpg';
        const  size = file.size / 1024 / 1024;//  1Byte = 8bit   1Kb= 1024Byte
        if(!extension && !extension2){
          this.$message({
            message:"只能上传 jpg、png格式",
            type:"warning"
          })
        }

        if(size>=2){
          this.$message({
            message:"上传文件大小不能超过2MB",
            type:"warning"
          })
          return 
        }

       return   extension || extension2;
       
      },
      onEditorChange(v) {
          console.log(v)
          this.form.detail = v.html;
          
      },
      regionChange(v) {
        // 二级品类
        console.log(v)
        this.region1list.map((item,index)=>{
          if (v === item.name) {
            // 二级品类
            categoryList({categoryId: item.id}).then(res=>{
              console.log(res)
              this.region2list = res.data.data;
            })
          }
        })
       
      },
      onSubmit() {
        console.log(this.form)
        addProduct(this.form).then(res=>{
          console.log(res)
          this.$message({
            message:res.data.data,
            type:"success"
          })
          this.$router.push("/product")
        })
      },
     
    }
  };
  </script>
  
  
  <style lang="scss" scoped>
  @import "../../Scss/index.scss";
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
  .inp {
    width: 30%;
  }
  .addcom_content {
    @include Wm(85%);
  }
  .addcom_hander {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .addcom_title {
    display: inline-block;
    font-weight: normal;
  }
  .addcomm {
    @include Wm(95%);
  }
  </style>